<template>
    <div>
        <div class="search-top">
            <van-icon name="arrow-left" size="0.5rem" @click="handleBack" />
            <van-icon name="video-o" size="0.5rem" />
            <input type="text" placeholder="周杰伦" v-model="inputVal" @keydown.enter="handleKeyUp">
        </div>
        <div class="history">
            <span class="history-title">历史</span>
            <span v-for="(item,index) in historyList " :key="index" class="history-item"
                @click="handleHistorySearch(item)">{{item}}</span>
            <van-icon name="delete-o" size="0.5rem" @click="handleDel" />
        </div>
        <div class="list-content">
            <div class="list-content-box" v-for="(item,index) in searchList" :key="item.id"
                @click="handleAddPlay(item)">
                <div class="index-item">
                    {{index+1}}
                </div>
                <div class="title-author">
                    <div class="title">
                        {{item.name}}
                    </div>
                    <div class="author">
                        {{handleAr(item.artists)}}
                    </div>
                </div>
                <div class="icons">
                    <van-icon v-if="item.mv!==0" name="tv-o" size="0.5rem" />
                    <van-icon name="wap-nav" size="0.5rem" />
                </div>
            </div>

        </div>
    </div>
</template>

<script lang="ts">import { defineComponent,reactive,toRefs,onMounted } from "vue";
import { useRouter } from "vue-router";
import { Vue3Marquee } from "vue3-marquee";
import {getSearch}from "@/utils/api.js"
import {handleAr} from "@/utils/utils.js"
import { useStore } from "vuex";
export default defineComponent({
setup() {
    const state=reactive({
        inputVal:"",
        historyList:[],
        searchList:[]
    })
    const store=useStore()
    const router=useRouter()
function handleBack(){
    router.back()
}
function handleDel(){
    localStorage.removeItem("historyList")
    state.historyList=[]
}
function handleAddPlay(item){
    item.al=item.album
    item.ar=item.artists
    item.al.picUrl = item.album.artist.img1v1Url
    // item.
    store.commit("changeAddPlay",item)
    store.commit("changePlayingSong",0)
}
function handleKeyUp(e){
    if(state.inputVal!==''){
        console.log(state.inputVal)
        state.historyList.unshift(state.inputVal)
        state.historyList = [...new Set(state.historyList)]
        if (state.historyList.length > 5) {
            state.historyList = state.historyList.slice(0, 5)
        }
        
        localStorage.setItem("historyList", JSON.stringify(state.historyList))
        async function getSearchList(){
            const response=await getSearch({keywords:state.inputVal})
            console.log(response)
            if(response.data.result&&response.data.result.songs?.length>0){
                console.log(1)
                state.searchList=response.data.result.songs
            }
        }
        getSearchList()
        state.inputVal = ""
    }else{
        return
    }

}
function handleHistorySearch(item){
    async function getSearchList() {
        const response = await getSearch({ keywords: item })
        console.log(response)
        if (response.data.result && response.data.result.songs?.length > 0) {
            state.searchList = response.data.result.songs
        }
    }
    getSearchList()
}
onMounted(()=>{
    state.historyList=JSON.parse(localStorage.getItem("historyList"))||[]
})
        return { 
            ...toRefs(state),
            handleDel,
            handleBack,
            handleKeyUp,
            handleHistorySearch,
            handleAddPlay,
            handleAr,          
        }

}});
</script>

<style lang="less" scoped>






.search-top{
width: 95%;
height: 1rem;
margin: 0.2rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
 .van-icon-video-o{
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
 }
 .van-icon-arrow-left {
     position: absolute;
     top: 0.2rem;
     left: 0.2rem;
 }
 input{
    width: 5rem;
    border: none;
    border-bottom: 1px solid black;
    
 }
 
 
}
.history {
    width: 95%;
    margin: 0.2rem;
    height: 1.5rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;

    .history-title {
        // position: absolute;
        // top: 0.2rem;
        // left:0.2rem;
    }
    .history-item{
        display: inline-block;
        background-color: rgb(187, 176, 176);
        color: black;
        border-radius: 0.3rem;
        padding: 0.1rem;
        height: 0.5rem;
        display: flex;
        font-size: small;
        align-items: center;
    }

    .van-icon-delete-o {
        // position: absolute;
        // top: 0.2rem;
        // right: 0.2rem;
    }
}
.list-content-box {
    padding: 0.2rem;
    display: flex;
    align-items: center;
    position: relative;

    .index-item {
        margin: 0.2rem;
        color: gray;
    }

    .title-author {

        .title {
            font-weight: bold;
            display: inline-block;
            width: 5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .author {
            margin-top: 0.1rem;
            font-size: small;
            color: gray;
        }
    }

    .icons {
        display: flex;
        gap: 0.1rem;
        position: absolute;
        right: 0.3rem;
    }
}
</style>